<template>
	<view class="flex searchbar" :style="_top">
		<view class='flex search'>
			<text class="iconfont icon-sousuo"></text>
			<input class="input" @input='onSearchInput' @confirm='onSearchConfirm'></input>
			<text class='text' @click='onSearchConfirm'>搜索</text>
		</view>

		<view v-if="area.length>0" class="flex" @click='onPopupClick' style="margin-left:50upx;flex-shrink:0;">
			<image style='width:20upx;height:11upx;' src="/static/img/icon_scence_more.png"></image>
			<text class='font-b' style='margin-left:10upx;font-size:32upx;color:#636363'>{{area}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			top:{
				type:String,
				default:"2upx"
			},
			area: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		},
		computed:{
			_top(){
				let top = "0px";
				//H5 position:fixed会把navbar遮挡了
				//#ifdef H5
				try {
					const res = uni.getSystemInfoSync();
					top = (res.windowTop)+"px";
				} catch (e) {
				}
				//#endif
				return 'top:' +top
			}
		},
		methods: {
			onSearchInput(event) {
				this.$emit("input", event)
			},
			onSearchConfirm(event) {
				this.$emit("search", event)
			},
			onPopupClick(event) {
				this.$emit("onPopupClick", event)
			}
		}
	}
</script>

<style>
	.flex {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.searchbar {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		padding-left: 32upx;
		padding-right: 32upx;
		background: white;
		z-index: 99999;
		/* #ifdef H5 */
		padding-top: 20upx;
		/* #endif */
		padding-bottom: 30upx;
	}
	.searchbar .search {
		margin-top: 10upx;
		margin-left: 28upx;
		flex-grow: 1;
		height: 72upx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0upx 5upx 20upx 1upx rgba(195, 195, 195, 0.53);
	}

	.searchbar .search .icon {
		width: 37upx;
		height: 37upx;
		margin-left: 14upx;
		flex-shrink: 0;
	}

	.searchbar .search .input {
		font-weight: 400;
		color: #333;
		font-size: 30upx;
		line-height: 30upx;

		flex-grow: 1;
		margin-left: 24upx;
	}

	.searchbar .search .text {
		font-weight: 500;
		color: #333;
		font-size: 30upx;
		line-height: 30upx;

		flex-shrink: 0;
		color: #2B91E2;
		margin-right: 20upx;
	}
</style>
